import { Text, StyleSheet, View, Image, TouchableOpacity, StatusBar } from 'react-native'
import React, { Component } from 'react'
import { Provider } from '@ant-design/react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, TransitionPresets, } from '@react-navigation/stack';
import LinearGradient from 'react-native-linear-gradient';
import { pTx } from "../../utils/dimensions"
import ShadowCard from "../../utils/shadowCard"
import Password from "./password"
import NewMnemonicPhrase from "./newMnemonicPhrase"
import BackupMnemonic from "./backupMnemonic"
import importWallet from "./importWallet"
import PersonalInfo from "./personalInfo"




function HomeScreen({ navigation }) {
    return (
        <>
            <StatusBar backgroundColor="rgba(255, 255, 255, 1)" barStyle={"dark-content"} />
            <View style={styles.container}>
                <Image style={styles.logo} source={require('../../assets/logo.png')}></Image>
            </View>
            <View style={styles.footerButton}>
                <ShadowCard style={styles.button}>
                    <LinearGradient
                        colors={['rgba(51, 225, 144, 1)', 'rgba(68, 225, 240, 1)']}
                        start={{ x: 0.25, y: 0.25 }}
                        end={{ x: 0.75, y: 0.75 }}
                        style={[styles.linearGradient]}>
                        <TouchableOpacity type="primary" style={[styles.button]} onPress={() => navigation.navigate('password', { name: "backupMnemonic" })}>
                            <Text style={styles.ButtonText}>创建新钱包</Text>
                        </TouchableOpacity>
                    </LinearGradient>
                </ShadowCard>
                <TouchableOpacity style={[styles.import, styles.button]} onPress={() => navigation.navigate('password', { name: "importWallet" })}>
                    <Text style={styles.ButtonText}>导入钱包</Text>
                </TouchableOpacity>
            </View>
        </>
    );
}

const Stack = createStackNavigator();
export default class CreateWallet extends Component {
    render() {
        return (
            <NavigationContainer theme={{
                colors: {
                    background: 'transparent'
                },
            }}>
                <Provider>
                    <Stack.Navigator initialRouteName="home"
                        screenOptions={{
                            gestureEnabled: true,
                            cardOverlayEnabled: true,
                            ...TransitionPresets.SlideFromRightIOS,
                            cardStyle: {
                                backgroundColor: "#fff",
                            }
                        }}
                    >
                        <Stack.Screen name="home" component={HomeScreen} options={{
                            headerShown: false
                        }} />
                        <Stack.Screen name="password" component={Password} options={{
                            title: "",
                            headerStyle: {
                                // backgroundColor: 'transparent',
                            },
                            headerShadowVisible: false,

                        }} />
                        <Stack.Screen name="newMnemonicPhrase" component={NewMnemonicPhrase} options={{
                            title: "助记词",
                            headerTitleAlign: 'center',
                            headerTitleStyle: {
                                color: "rgba(10, 12, 20, 1)",
                                fontSize: pTx(18),
                            },
                            headerStyle: {
                                // backgroundColor: 'transparent',
                            },
                            headerShadowVisible: false
                        }} />
                        <Stack.Screen name="backupMnemonic" component={BackupMnemonic} options={{
                            title: "助记词",
                            headerTitleAlign: 'center',
                            headerTitleStyle: {
                                color: "rgba(10, 12, 20, 1)",
                                fontSize: pTx(18),
                            },
                            headerStyle: {
                                // backgroundColor: 'transparent',
                            },
                            headerShadowVisible: false
                        }} />
                        <Stack.Screen name="importWallet" component={importWallet} options={{
                            title: "导入钱包",
                            headerTitleAlign: 'center',
                            headerTitleStyle: {
                                color: "rgba(10, 12, 20, 1)",
                                fontSize: pTx(18),
                            },
                            headerStyle: {
                                // backgroundColor: 'transparent',
                            },
                            headerShadowVisible: false
                        }} />
                        <Stack.Screen name="personalInfo" component={PersonalInfo} options={{
                            title: "个人信息",
                            headerTitleAlign: 'center',
                            headerTitleStyle: {
                                color: "rgba(10, 12, 20, 1)",
                                fontSize: pTx(18),
                            },
                            headerStyle: {
                                // backgroundColor: 'transparent',
                            },
                            headerShadowVisible: false,
                            gestureEnabled: false,
                            headerLeft: (props) => (
                                ''
                            ),
                        }}
                        />

                    </Stack.Navigator>
                </Provider>
            </NavigationContainer>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
    },
    logo: {
        width: pTx(130),
        height: pTx(130),
    },
    footerButton: {
        paddingTop: pTx(15),
        paddingBottom: pTx(63),
        alignItems: "center"
    },
    linearGradient: {
        borderRadius: 6
    },
    button: {
        width: pTx(303),
        height: pTx(55),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
    },
    import: {
        marginTop: pTx(15),
        backgroundColor: "rgba(237, 237, 237, 1)",
        borderWidth: 0,
        borderRadius: 6
    },
    ButtonText: {
        color: "rgba(10, 12, 20, 1)",
        fontSize: pTx(14),
        fontWeight: 'bold'
    }
})